<template>
	<view class="container">
		<!-- 个人信息 -->
		<view class="header">
			<view class="Headportrait">
				<image :src="this.avatar" mode=""></image>
			</view>
			<view class="info">
				<view class="name">
					{{this.goods.userName === '' ? '学生' : this.goods.userName}}
				</view>
				<view class="infotime">
					发布于{{this.goods.createTime}} | 岭南师范学院
				</view>
			</view>
		</view>
		<view class="goodstop">
			<view class="value">
				<view class="price">
					<view class="newprice">
						￥{{this.goods.price === '' ? '用户未设置价格' : this.goods.price}}
					</view>
				</view>
			</view>

			<view class="describe">
				{{this.goods.description || '暂无'}}
			</view>
			<!-- 图片 -->
			<view class="pho" @click="into" v-if="this.urlList.length===1">
				<image :src="this.urlList[0]" mode=""></image>
			</view>
			<view v-if="this.urlList.length>1">
				<swiper circular indicator-dots autoplay class="swiper" >
					<swiper-item class="swiperitem" v-for="(item,index) in this.urlList" key="index">
						<image :src="item" @click="intomore(index)">
						</image>
					</swiper-item>
				</swiper>
			</view>


		</view>

		<!-- 		<view class="userStatus">
			<view class="leave">
				留言：{{commentsList.length}}
			</view>
			<view class="userlike">
				<view class="" @click="changeLikeState()">

					<img v-show="n === 1" src="../../static/like.png">
					<img v-show="n === 2" src="../../static/liked.png">
				</view>
				<span>32</span>
			</view>
		</view> -->
		<view class="message">
			<view class="Headportrait">
				<image
					src="https://lnu-market.oss-cn-guangzhou.aliyuncs.com/2022-10-06/16:22:29-8b47bee75ce5400792163d304d21f7b4.jpg"
					mode=""></image>
			</view>
			<input class="textbox" placeholder="   看对眼就留言,问问更多细节" v-model="description" />
			<button class="btnto" @click="addcommon" v-if="description!==null">发送</button>
		</view>
		<!-- 留言模块 -->
		<view class="uni-comment">
			<view class="empty" v-if="common.length <= 0">
				<!-- <u-empty text="暂无评论,快来抢占沙发吧" mode="coupon"></u-empty> -->
				<luanqing-empty show="true" text="没有更多数据啦" textColor="#000"></luanqing-empty>
			</view>
			<view class="uni-comment-list" v-for="(commentsList,index) in common" :key="index">
				<view class="uni-comment-face">
					<image
						src="https://lnu-market.oss-cn-guangzhou.aliyuncs.com/2022-10-06/16:22:29-8b47bee75ce5400792163d304d21f7b4.jpg"
						mode="widthFix"></image>
				</view>
				<view class="uni-comment-body">
					<view class="uni-comment-top">
						<!-- <text>{{commentsList.nickname==''||commentsList.nickname==null?'匿名':commentsList.nickname}}</text> -->
						<text>用户</text>
					</view>
					<view class="uni-comment-date">
						<text>{{commentsList.createTime}}</text>
					</view>
					<view class="uni-comment-content">{{commentsList.description}}</view>
				</view>

			</view>
			<!-- <luanqing-empty show="true" text="没有更多数据啦" textColor="#000"></luanqing-empty> -->
		</view>
		<view class="box">

		</view>
		<!-- 商品导航 -->
		<view class="goods-carts">
			<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	import {
		apiGetPostInfo,
		apiGetComment,
		apiSaveFavorite,
		apiAddComment
	} from '@/utils/request/api.js'
	export default {
		components: {},
		data() {
			return {
				common: {},
				touch: 0,
				description: null,
				params: {
					userId: 202108764312,

					gid: 0,

				},
				n: 1,
				gid: 0,
				goods: {},
				avatar: '',
				urlList: '',
				index: '',
				nickname: '',
				created_user_id: '',
				commentContent: '',
				options: [{
					icon: 'home',
					text: '首页'
				}, {
					icon: 'chatbubble',
					text: '留言',
					info: 2,
					infoBackgroundColor: '#007aff',
					infoColor: "#f5f5f5",

				}, {
					icon: 'star',
					text: '收藏',
					// info: 2
				}],
				buttonGroup: [{
						text: '私信',
						backgroundColor: 'linear-gradient(90deg, #00a8cc, #00a8cc)',
						color: '#fff'
					},
					{
						text: '我想要',
						backgroundColor: 'linear-gradient(90deg, #00a8cc, #00a8cc)',
						color: '#fff'
					}
				],
				customButtonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #1E83FF, #0053B8)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #60F3FF, #088FEB)',
						color: '#fff'
					}
				],
				customButtonGroup1: [{
					text: '立即购买',
					backgroundColor: 'linear-gradient(90deg, #00a8cc, #00a8cc)',
					color: '#fff'
				}],
				params: {
					description: "",
					gid: 0,
					userId: "202108764312",
					pid: 0
				}
			}
		},

		methods: {
			addcommon() {
				this.params.description = this.description
				this.params.gid = this.gid
				apiAddComment(this.params).then(res => {
					// this.goods = res.data
					uni.showToast({
						title: res.msg,
						icon: res.msg
					})
					// setTimeout( () => {
					//     uni.redirectTo({
					//         url: '../details/details?gid=' + this.gid
					//     });	
					// }, 500)
					setTimeout(() => {
						this.$router.go(0)
					}, 400)


					console.log(res);

				}).catch(err => {
					console.log(err);
				})
			},
			into() {
				uni.previewImage({
					urls: this.urlList,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data
								.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			intomore(index) {
				uni.previewImage({
					urls: this.urlList,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data
								.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			onClick(e) {
				// uni.showToast({
				// 	title: `点击${e.content.text}`,
				// 	icon: 'none'
				// })
				if (e.content.text === '收藏') {
					this.params.gid = this.gid
					apiSaveFavorite(
						this.gid,
						this.params.userId
					).then(res => {
						// console.log(res);
						if (res.code === 200) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					}).catch(err => {
						console.log(err);
					})

				}
			},
			buttonClick(e) {
				console.log(this.goods)
				this.options[2].info++
			},
			changeLikeState() {
				if (this.n === 1) {
					this.n++;
				} else if (this.n === 2) {
					this.n--;
				}
			}
		},
		onLoad(e) {
			this.gid = e.gid
			console.log(this.gid);
			
			apiGetPostInfo({
				id: this.gid
			}).then(res => {
				this.goods = res.data
				console.log(res.data.userName);
				this.urlList = this.goods.urlList
				this.avatar = this.goods.avatar
				this.goods = this.goods

				console.log(this.goods);
			}).catch(err => {
				console.log(err);
			})
			
			apiGetComment({
				id: this.gid
			}).then(res => {
				this.common = res.data


				console.log(res.data);
			}).catch(err => {
				console.log(err);
			})
		}

	}
</script>

<style lang="less" scoped>
	.container {
		background-color: #f4f4f4;
	}

	.header {
		padding: 10px;
		background-color: #fff;
	}



	.info {
		display: inline-block;

		margin-left: 10px;
	}

	.name {
		margin-bottom: 3px;
		font-size: 20px;
	}

	.infotime {
		color: #949494;
		margin-bottom: 10px;
	}


	.goodstop {
		margin-bottom: 5px;
		background-color: #fff;
		padding-bottom: 20px;
		border-radius: 0 0 20px 20px;
	}

	.value {
		display: flex;
	}

	.price {
		display: inline-block;
		flex: 1;
		text-align: left;
		// width: 40%;
		height: 18px;
		color: rgb(255, 85, 0);
		font-size: 23px;
		font-weight: 550;
		margin-left: 20px;
		margin-bottom: 20px;

		// white-space:nowarp;/*强制在一行显示*/
		// // over-flow:hidden;/*溢出隐藏*/
		// overflow: hidden;
		// text-overflow:ellipsip;/*溢出显示省略号*/
		.newprice {

			// width: 100px;
			overflow: hidden;
			-webkit-line-clamp: 2;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
		}
	}

	.oldprice {
		color: #949494;
		font-size: 15px;
		text-decoration: line-through;
	}

	.use {
		display: inline-block;
		float: right;
	}

	.usestate {
		color: #00a8cc;
		font-size: 20px;
		font-style: italic;
	}

	.want {
		color: #949494;
		font-size: 15px;
	}

	.title {
		// text-align: center;
		display: inline-block;
		font-size: 18px;
		font-weight: 700;
		margin: 0px 15px 10px;
		color: #262626;
		line-height: 21px;


	}

	.describe {
		font-size: 18px;
		margin: 20px 15px 30px;

	}

	.pho {
		margin: 5%;
		width: 90%;
		height: 220px;
		border-radius: 20px;
	}

	.pho image {
		width: 100%;
		border-radius: 10px;
		// height: 100%;

	}

	.userStatus {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		background-color: #fff;
		// border: 1px solid black;

		.leave {
			font-size: 18px;
			margin: 10px;
			font-weight: 500;
		}

		.userlike {
			display: flex;
		}

		.userlike img {
			height: 50rpx;
			width: 50rpx;
		}

		span {
			font-size: 18px;
			text-align: center;
			// border: 1px solid black;
			margin-left: 10%;
		}
	}

	.message {
		display: flex;
		padding: 10px 10px;
		background-color: #fff;
		padding-bottom: 0;
		border-radius: 10px;
		padding-bottom: 5px;
		// margin-bottom: 5px;
		margin-top: 10px;
	}
	.Headportrait {
		display: inline-block;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		overflow: hidden;
	}

	.Headportrait image {
		height: 100%;
		width: 100%;
	}
	.textbox {
		// width: 62%;
		flex: 1;
		height: 30px;
		display: inline-block;
		background-color: #ebebeb;
		margin-left: 5px;
		border-radius: 20px;
		padding-left: 10px;
		padding-top: 1.5%;
		margin-top: 3px;
	}

	.textbox1 {
		// width: 60%;
		height: 35px;
		display: inline-block;
		background-color: #ebebeb;
		margin-left: 10px;
		border-radius: 20px;
		padding-left: 10px;
	}

	.btnto {
		display: inline-block;
		width: 20%;
		height: 35px;
		line-height: 35px;
		color: #ffffff;
		background-color: #54adff;
		border-radius: 20px;
		margin-left: 5px;
		margin-top: 5px;
	}

	//留言
	.uni-comment {
		padding: 5rpx 15rpx;
		display: flex;
		flex-grow: 1;
		flex-direction: column;
		padding-top: 20rpx;
		border-bottom: 1rpx solid #e9e7ef;
		background-color: #fff;
	}

	.uni-comment-list {
		flex-wrap: nowrap;
		padding: 10rpx 0;
		margin: 10rpx 0;
		width: 100%;
		display: flex;
		border-bottom: 1rpx solid #e9e7ef;
	}

	.uni-comment-face {
		width: 35px;
		height: 35px;
		border-radius: 50%;
		margin-right: 20upx;
		flex-shrink: 0;
		overflow: hidden;
	}

	.uni-comment-face image {
		width: 100%;
		border-radius: 100%;
	}

	.uni-comment-body {
		width: 100%;
		border-radius: 10px;

	}

	.uni-comment-top {
		display: inline-block;
		line-height: 1.5em;
		justify-content: space-between;
	}

	.uni-comment-top text {
		color: #0A98D5;
		font-size: 15px;
	}

	.uni-comment-date {
		display: inline-block;
		font-size: 14px;
		color: #828282;
		line-height: 38upx;
		flex-direction: row;
		justify-content: space-between;
		display: flex !important;
		flex-grow: 1;
		color: gray;
	}

	.uni-comment-date view {
		color: #666666;
		font-size: 20rpx;
		line-height: 38upx;
	}

	.uni-comment-content {
		line-height: 1.6em;
		font-size: 16px;
		padding: 8rpx 0;
	}

	.uni-comment-replay-btn {
		background: #FFF;
		font-size: 24upx;
		line-height: 28upx;
		padding: 5rpx 20upx;
		border-radius: 30upx;
		color: #333 !important;
		margin: 0 10upx;
	}

	.commitButton {
		color: white;
		width: 90%;
		margin: 0rpx auto;
		height: 75rpx;
		line-height: 75rpx;
		font-size: 37rpx;
		background: linear-gradient(to left, #86B6FD, #8fc9fc, #86B6FD);
	}

	.contentTextArea {
		font-size: 30rpx;
		height: 170rpx;
		border: 1rpx solid #e9e7ef;
		width: 86%;
		margin: 0rpx auto;
		margin-bottom: 15rpx;
		padding: 20rpx 0 0 20rpx;
		border-radius: 6rpx;
	}

	.box {
		width: 100%;
		height: 40px;
		background-color: #fff;
	}



	//尾部导航栏
	.example-body {
		padding: 0;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}

	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}

	.swiper {
		width: 95%;
		height: 250px;
		margin: 0 0px 0 10px;
		border: 0;
	}

	.swiperitem image {
		width: 100%;
		height: 100%;
		margin: 0 0px 0 0px;
		border-radius: 10px;
	}
</style>
